<template>
  <my-navigation-bar :my-style="style" title='jfaj'>告警信息</my-navigation-bar>
  <text class="navbar" :style="flag?{top: '90rpx'}:''">编辑</text>
  <view v-if="flag">
    <view class="content-box" :style="flag?{marginTop: '180rpx'}:''">
      <view class="time">
        2023/03
      </view>
      <scroll-view scroll-y="true" class="scroll-content">
        <view class="item-box" v-for="(item, index) in warnState.warnData" :key="index">
          <view class="left" @tap="scaleImg(item.imgSrc)">
            <image :src="item.imgSrc" mode=""></image>
          </view>
          <view class="right">
            <text class="date-box">{{item.date}}</text>
            <text class="desc">{{item.desc}}</text>
          </view>
        </view>
       
      </scroll-view>
    </view>
    <view class="img-preview" @tap="scaleImg" v-show="warnState.isShow">
      <view class="img-box">
        <img :src="warnState.imgSrc" alt="">
      </view>
    </view>
  </view>
 <view :style="{transform: state.coverTransform, transition: state.coverTransition}" @touchmove="moveH" @touchstart="startH" @touchend="endH" v-else>
  <scroll-view scroll-y="true" class="scroll-box">
     <view class="content-box" :style="flag?{marginTop: '180rpx'}:''">
         <view class="time">
           2023/03
         </view>
         <scroll-view scroll-y="true" class="scroll-content">
           <view class="item-box" v-for="(item, index) in warnState.warnData" :key="index">
             <view class="left" @tap="scaleImg(item.imgSrc)">
               <image :src="item.imgSrc" mode=""></image>
             </view>
             <view class="right">
               <text class="date-box">{{item.date}}</text>
               <text class="desc">{{item.desc}}</text>
             </view>
           </view>
          
         </scroll-view>
       </view>
       <view class="img-preview" @tap="scaleImg" v-show="warnState.isShow">
         <view class="img-box">
           <img :src="warnState.imgSrc" alt="">
         </view>
       </view>
  </scroll-view>
 </view>
</template>

<script setup>
  import myNavigationBarVue from '../../components/my-navigation-bar/my-navigation-bar.vue';
  import {
    computed, watchEffect,reactive
  } from "vue";
  //导入图片
  import img1 from "../../static/image/warn/10.jpg";
  import img2 from "../../static/image/warn/11.jpg";
  import img3 from "../../static/image/warn/13.jpg";
  import img4 from "../../static/image/warn/14.jpg";
  import img5 from "../../static/image/warn/15.jpg";
  import useBounceFunc from "../../hooks/bounce.js";
  const {state, moveH, startH, endH} = useBounceFunc();
  const flag = computed(() => {
    return getApp().globalData.isIphoneX;
  })
  watchEffect(()=>{
    console.log(flag.value);
  })
  const style = {
    textAlign: 'center',
    paddingLeft: 0
  };
  const warnState = reactive({
    isShow: false,
    imgSrc: "",
    warnData: null,
  }) 
  warnState.warnData = [
    {
    imgSrc: img1,
    date: '2023.03.01 10:24',
    desc: '人形检测'
  },
  {
    imgSrc: img2,
    date: '2023.03.01 10:24',
    desc: '哭声检测'
  },
  {
    imgSrc: img3,
    date: '2023.03.01 10:24',
    desc: '睡眠检测'
  },
  {
    imgSrc: img4,
    date: '2023.03.01 10:24',
    desc: '摔倒检测'
  },
  {
    imgSrc: img5,
    date: '2023.03.01 10:24',
    desc: '睡醒检测'
  }
  ]

  const scaleImg = (imgSrc) => {
    warnState.isShow = !warnState.isShow;
    warnState.imgSrc = imgSrc;
  }
</script>

<style lang="scss" scoped>

.navbar{
  position: fixed;
  top: 70rpx;
  left: 26rpx;
  z-index: 100;
  font-size: 37rpx;
  font-weight: 600;
  color: #999999;
}
.scroll-box{
  height: 100vh;
}
  .content-box {
    margin-top: 150rpx;

    .time {
      background-color: #F2F2F2;
      height: 90rpx;
      text-align: center;
      line-height: 90rpx;
      color: #bbb;
      font-weight: 600;
    }

    .scroll-content {
      background-color: #F2F2F2;
      height: 80vh;

      .item-box {
        height: 210rpx;
        background-color: #fff;
        display: flex;
        justify-content: space-around;
        box-sizing: border-box;
        padding: 30rpx 50rpx;
        // margin-bottom: 20rpx;

        .left {
          width: 210rpx;
          height: 150rpx;
          image {
            width: 100%;
            height: 100%;
            border-radius: 10rpx;
            position: relative;

            &::before {
              font-family: 'iconfont';
              content: '\ea6e';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              color: #fff;
              font-size: 50rpx;
            }
          }
        }

        .right {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          font-weight: 700;

          .date-box {
            font-size: 35rpx;
          }

          .desc {
            color: #A1A1A1;
          }
        }
      }
    }
  }

 .img-preview{
   position: absolute;
   top: 0;
   left: 0;
   width: 100vw;
   height: 100vh;
   background-color: rgba(0,0,0,0.3);
   z-index: 10;
   .img-box{
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     // width: 700rpx;
     // height: 500rpx;
     img{
       max-width: 700rpx;
     }
   }
 }
</style>
